<template>
  <section>
    <div class="SignIn_new">
        <HeaderComponent id="header" title="达人堂享特权" background='#ffffff' color='#000000' image_='0' size='4.8vw' />
        <!-- 头部信息 -->
        <div class="top_title" :style="{ paddingTop: height + 'px' }">
        <img class="title_header" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_title@2x.png"
            alt="">
        <div class="hader_image">
            <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_no.1@2x.png" alt="">
            <img v-if="gift_rank[0].userId" :src="gift_rank[0].headPic" alt="">
            <img v-else src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/emoty_img@2x.png" alt=""
            style="width: 30vw;height:30vw">
        </div>
        <div class="name_sex">
            <img v-if="gift_rank[0].sex == 1 && gift_rank[0].userId" :src="require('@/assets/images/one_piece/boy_lab.png')" alt="">
            <img v-if="gift_rank[0].sex == 2 && gift_rank[0].userId" :src="require('@/assets/images/one_piece/girl_lab.png')" alt="">
            <span v-if="gift_rank[0].userId">{{splice_(gift_rank[0].nickname)}}</span>
            <span v-else>虚位以待</span>
        </div>
        <div v-if="gift_rank[0].userId" class="num_first_rank1">{{num_con(gift_rank[0].num)}}朵玫瑰</div>
        <div class="CurrentRose">
            <div>
            <div class="left_information">
                <span>当前玫瑰数量</span>
                <div>
                <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
                <span>{{gift_num}}</span>
                </div>
            </div>
            <div class="right_button">
                <div v-if="sign_status==0" class="signin" @click="singin_">签到得玫瑰</div>
                <div v-if="sign_status==1" class="over_signin">已完成</div>
                <div v-if="sign_status==2" class="timeDame_">
                <CountDown :time="show_next_Time" @finish="SignIn_new">
                    <template v-slot="timeData">
                    <div class="item">{{ timeData.minutes>0?timeData.minutes+'分后签到':timeData.seconds+'秒后签到'}}</div>
                    </template>
                </CountDown>
                </div>
                <div class="buy_meigui" @click="model_prize=true">购买</div>
            </div>
            </div>
        </div>
        </div>

        <!-- tab切换 -->
        <div class="tab_switch">

        <!-- 切换 -->
        <div class="tabbar">
            <div :class="cur==1?'active':''" @click="tab_list(1)">今日实时榜</div>
            <div :class="cur==2?'active':''" @click="tab_list(2)">达人堂</div>
        </div>
        <!-- 倒计时 -->
        <div class="countDown" v-if="cur==1">
            <CountDown :time="showTime" @finish="SignIn_new">
                <template #default="timeData">
                    距离截榜还剩
                    <div class="item">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours }}</div>时
                    <div class="item">{{ timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes }}</div>分
                    <div class="item">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</div>秒
                </template>
            </CountDown>
        </div>

        <!-- 列表 -->
        <div class="rank_list">
            <!-- 刷新 -->
            <div class="Refresh" @click="Refresh_" v-if="cur == 1">
            <img :class="Refresh_class?'Refresh_class':''"
                src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/shuaxin_icon@2x.png" alt="">
            <span>刷新</span>
            </div>
            <img class="header_kuang"
            src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame1@2x.png" alt="">
            <div class="center_list">
            <div class="center_informa" v-if="cur == 1">
                <div v-for="item,index in splice_list" :key="index" class="single">
                <div class="rank_list2">{{index+2}}</div>
                <div class="header_border_"><img :src="item.headPic" alt=""></div>
                <div class="name_sex_">
                    <span>{{splice_(item.nickname)}}</span>
                    <img v-if="item.sex == 1" :src="require('@/assets/images/one_piece/boy_lab.png')" alt="">
                    <img v-else :src="require('@/assets/images/one_piece/girl_lab.png')" alt="">
                </div>
                <div class="right_mun">{{num_con(item.num)}}朵玫瑰</div>
                </div>
            </div>
            <div class="month_list" v-if="cur == 2">

                <div class="most_quanbu flash-list" ref="ref_top">
                    <div v-for="item,index in user_wall.length" :key="index" @click="leaderwallMonth(index+1,$event)"
                        :class="cur_tab == item?'list_center_nor active2':'list_center_nor'" ref="button">
                        <img v-if="cur_tab == item"
                        src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/time_select_img@2x.png" alt="">
                        <img v-else src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/time_nor@2x.png" alt="">
                        <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/time2@2x.png"
                        v-if="item != user_wall.length" alt="">
                        <span>{{item}}月</span>
                    </div>
                </div>

                <div class="center_list_nth" @scroll="scrollEvent" ref="selectFiles">
                    <div v-for="item,index in user_wall" :key="index" class="center_box">
                        <div class="nth_moth_" :id="'month'+(index+1)*1">
                        <div></div>{{index+1}}月
                        </div>
                        <div class="content_list">
                            <div v-for="items,indexs in item" :key="indexs" @click="open_usrt(items.user_id)"
                                :class="indexs==0?'img_biaoti img_biaoti_active':'img_biaoti'">
                                <img v-if="indexs==0"
                                src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/daren_list_frame1@2x.png" alt="">
                                <img v-else src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/daren_list_frame2@2x.png"
                                alt="">
                                <img alt="" v-lazy="items.head_pic">
                                <div class="name_time">
                                <div>{{items.nickname}}</div>
                                <div>{{ items.add_date.substr(5, 5) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <img class="bottom_kuang"
            src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame3@2x.png" alt="">
        </div>
        </div>
        <!-- 达人堂享特权 -->
        <div class="Darentang">达人特权</div>
        <!-- 排名奖励 -->
        <div class="rank_prize">
        <img class="top_kuang_" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame1@2x.png"
            alt="">
        <div class="center_rang_prize">
            <img class="rank_title_" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/top1_text@2x.png" alt="">
            <div class="rank_title_2">{{prize_list[0].gift_name}}</div>
            <div class="ran1_texiao">
            <img :src="prize_list[0].gift_pic" alt="">
            <div class="time_" v-if="prize_list[0].multiple_num">{{prize_list[0].multiple_num}}天</div>
            </div>
            <div class="rank1_header_img">
            <div class="rank_prize2">
                <div class="top_bjk_ce">
                <img :src="prize_list[1].gift_pic" alt="">
                <div v-if="prize_list[1].multiple_num">{{prize_list[1].multiple_num}}天</div>
                </div>
                <div class="name_prizr_">
                {{prize_list[1].gift_name}}
                </div>
            </div>
            <div class="rank_prize2">
                <div class="top_bjk_ce">
                <img :src="prize_list[2].gift_pic" alt="">
                <div v-if="prize_list[2].multiple_num">{{prize_list[2].multiple_num}}天</div>
                </div>
                <div class="name_prizr_">
                {{prize_list[2].gift_name}}
                </div>
            </div>
            </div>
            <div class="rank1_header_img rank1_header_img23">
            <div class="rank_prize2">
                <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/top2_text@2x.png" alt="">
                <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/interest_arrow_img@2x.png" alt="">
                <div class="top_bjk_ce">
                <img :src="prize_list[3].gift_pic" alt="">
                <div v-if="prize_list[3].multiple_num">{{prize_list[3].multiple_num}}天</div>
                </div>
                <div class="name_prizr_">
                {{prize_list[3].gift_name}}
                </div>
            </div>
            <div class="rank_prize2">
                <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/top3_text@2x.png" alt="">
                <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/interest_arrow_img@2x.png" alt="">
                <div class="top_bjk_ce">
                <img :src="prize_list[4].gift_pic" alt="">
                <div v-if="prize_list[4].multiple_num">{{prize_list[4].multiple_num}}天</div>
                </div>
                <div class="name_prizr_">
                {{prize_list[4].gift_name}}
                </div>
            </div>
            </div>
        </div>
        <img class="bottom_kuang_"
            src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame3@2x.png" alt="">
        </div>
        <!-- 活动规则 -->
        <div class="Darentang">活动规则</div>
        <div class="res_rule_infor">
        <div>
            <span style="padding-top:8px">1. 每天获得玫瑰数量第一名获得达人称号;</span>
            <span>2. 达人头像框有效期分别为7天,3天,1天; </span>
            <span>3. 达人堂勋章为永久有效,每天第一名获得;</span>
            <span>4. 获得玫瑰方式为签到或购买,每朵玫瑰10钻;</span>
            <span>5.每小时可签到一次,每人每天最多可签到5次.</span>
        </div>
        </div>
        <Popup v-model="model_prize" :close-on-click-overlay="false">
        <div class="mode_meigui_buy">
            <img @click="model_prize = false;number_list=''" class="close_btn"
            src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/popup_close_icon@2x.png" alt="">
            <img class="top_back" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame1@2x.png"
            alt="">
            <img class="bottom_back"
            src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame3@2x.png" alt="">
            <div class="close_btn2">购买玫瑰花</div>
            <div class="center_info">
            <div class="list_imforin">
                <div class="hui_Price">
                <div class="first_ont">
                    <div class="discount"></div>
                    <div class="huan_into" @click="calist_tab(1)">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/300.png" alt="">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
                    <span>3000</span>
                    <div v-if="tab_cur_ == 1">✓</div>
                    </div>
                </div>
                <div class="first_ont">
                    <div class="discount">限时9.6折</div>
                    <div class="huan_into" @click="calist_tab(2)">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/1000.png" alt="">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
                    <span>9600</span>
                    <div v-if="tab_cur_ == 2">✓</div>
                    </div>
                </div>
                <div class="first_ont">
                    <div class="discount">限时8.6折</div>
                    <div class="huan_into" @click="calist_tab(3)">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/3000.png" alt="">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
                    <span>25800</span>
                    <div v-if="tab_cur_ == 3">✓</div>
                    </div>
                </div>
                </div>
                <input class="ipt_npt" type="number" placeholder="请输入购买数量" v-model="number_list"
                oninput="if(value.length > 8)value = value.slice(0, 8)" />
                <div class="span_init">
                <span>每朵玫瑰需消耗10钻</span>
                <span>共消耗{{consume()}}钻</span>
                </div>
                <div class="btn_gift" @click="gifv_meigui">购买</div>
            </div>
            </div>
        </div>
        </Popup>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, nextTick, inject, getCurrentInstance, watch } from 'vue'
import { Toast, Dialog, Popup, CountDown } from 'vant'
import wx from 'weixin-js-sdk'
import smoothscroll from 'smoothscroll-polyfill'
import { activityLeaderwall, activityLeaderwallYear, activityBuygift, activityLeaderSign } from '@/api/activity'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
import 'vant/lib/index.css'
export default defineComponent({
    components: {
        HeaderComponent,
        Popup,
        CountDown
    },
    setup () {
        const currentInstance: any = getCurrentInstance()
        const data = reactive<Record<string, any>>({
            active: 0, // 当前激活的导航索引
            tab_cur_: '',
            number_list: '', //数量
            model_prize: false, //购买玫瑰
            cur_tab: 1, //月份
            cur: 1,
            isiOS: false,
            height: inject<number>('getHeight') ? inject<number>('getHeight') : 48,
            gift_rank: [{
            headPic: '',
            nickname: ''
            }], //今日榜
            splice_list: [], //2-9名
            user_wall: [], //达仁堂
            gift_num: "", //玫瑰数量
            sign_status: 0, //是否签到
            slide: false, //是否允许滚动事件触发
            prize_list: [{
                "type": 1,
                "gift_id": 128,
                "gift_name": "达人堂进场特效",
                "gift_type": 3,
                "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202205/31/1653984295.png?x-oss-process=image/resize,w_300",
                "multiple_num": 7
            },
            {
                "type": 1,
                "gift_id": 66,
                "gift_name": "达人堂头像框",
                "gift_type": 3,
                "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202109/13/1631501701.png?x-oss-process=image/resize,w_300",
                "multiple_num": 7
            },
            {
                "type": 1,
                "gift_id": 5,
                "gift_name": "达人堂勋章",
                "gift_type": 4,
                "gift_pic": "http://img.xunyinjiaoyou.com/upload/medal/daren-static.png?x-oss-process=image/resize,w_300",
                "multiple_num": 0
            },
            {
                "type": 2,
                "gift_id": 67,
                "gift_name": "达人堂头像框",
                "gift_type": 3,
                "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202109/13/1631501729.png?x-oss-process=image/resize,w_300",
                "multiple_num": 3
            },
            {
                "type": 3,
                "gift_id": 67,
                "gift_name": "达人堂头像框",
                "gift_type": 3,
                "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202109/13/1631501729.png?x-oss-process=image/resize,w_300",
                "multiple_num": 1
            },
            ], //奖品列表
            Refresh_class: false, //刷新
            showTime: '', //截榜倒计时
            show_next_Time: '', //下一次签到
            top_list: true, //顶上还有数据
            bottom_list: true, //底部还有数据
        })
        watch(data.number_list, () => {
            data.tab_cur_ = '';
            const num = Math.floor(Math.abs(data.number_list)) == 0 ? '' : Math.floor(Math.abs(data.number_list));
            data.number_list = num;
        }, { deep: true })
        const consume = (): number => {
            if (data.number_list < 1000) {
                return data.number_list * 10
            } else if (data.number_list < 3000) {
                return Math.floor(data.number_list * 9.6);
            } else {
                return Math.floor(data.number_list * 8.6)
            }
        }
        const SignIn_new = async (): Promise<void> => {
            const arys = {} //参数
            const dataRes = await activityLeaderwall(arys)
            if (dataRes.data.status == 0) {
                if (dataRes.data.result.gift_rank.length) {
                data.gift_rank = dataRes.data.result.gift_rank; //今日榜
                data.splice_list = data.gift_rank.slice(1)
                }
                data.gift_num = dataRes.data.result.gift_num; //玫瑰数
                data.prize_list = dataRes.data.result.prize_list; //奖品列表
                data.sign_status = dataRes.data.result.sign_status; //签到否

                const nowDate: any = new Date()
                const nowtime = parseInt(nowDate.getTime())

                data.showTime = dataRes.data.result.end_time * 1000 - nowtime

                if (data.showTime < 0) {
                    data.showTime = 0
                }
                data.show_next_Time = dataRes.data.result.sign_next_time * 1000 - nowtime
                setTimeout(() => {
                    data.Refresh_class = false
                }, 2000)
            } else {
                Toast(dataRes.data.text);
            }
        }
        const tab_list = (tab: number): void => {
            data.cur = tab;
            if (tab == 1) {
                data.cur_tab = 1;
            } else if (tab == 2) {
                leaderwallYear_all();
            }
        }
        const leaderwallYear_all = async (): Promise<void> => {
            const myDate: any = new Date();
            const arys = {
                year: myDate.getFullYear()
            } //参数
            const dataRes = await activityLeaderwallYear(arys)
            if (dataRes.data.status == 0) {
                data.user_wall = dataRes.data.result.user_wall;
                data.user_wall = Object.values(data.user_wall);
                data.cur_tab = data.user_wall.length;
                nextTick(() => {
                    console.log(111)
                    currentInstance.proxy.$refs['button'][data.user_wall.length - 1].click()
                    setTimeout(() => {
                        const scrollBox = document.getElementsByClassName('flash-list') //获取最外层的元素
                        scrollBox[0].scrollLeft = 999;
                    }, 1500)
                })
            }
        }
        const scrollEvent = (e: any): any => {
            if (data.slide) {
                 return
            }
            if (data.cur_tab > data.user_wall.length) {
                return data.cur_tab--
            }

            let base = 538; //校准不同手机scrollTop基数
            let CAB = Math.round(e.srcElement.clientHeight / base * 100) / 100; //获得与基数相差倍数
            let point = Math.round(e.srcElement.scrollTop / CAB); //与倍数校验算出统一scrollTop
        
            if (point < 850) {
                data.cur_tab = 1
            } else if (point < 2095) {
                data.cur_tab = 2
            } else if (point < 3456) {
                data.cur_tab = 3
            } else if (point < 4710) {
                data.cur_tab = 4
            } else if (point < 6060) {
                data.cur_tab = 5
            } else if (point < 7310) {
                data.cur_tab = 6
            } else if (point < 8670) {
                data.cur_tab = 7
            } else if (point < 10028) {
                data.cur_tab = 8
            } else if (point < 11276) {
                data.cur_tab = 9
            } else if (point < 12632) {
                data.cur_tab = 10
            } else if (point < 13886) {
                data.cur_tab = 11
            } else {
                data.cur_tab = 12
            }
            // 顶部居中月份
            nextTick(() => {
                var anchor: any = document.getElementsByClassName('list_center_nor')[data.cur_tab - 1];
                const spanLeft = anchor.offsetLeft //当前点击的元素左边距离
                const divBox = document.getElementsByClassName('active2')[0].clientWidth / 2 //点击的元素一半宽度
                const totalWidths = document.body.clientWidth //屏幕总宽度
                const widths = document.body.clientWidth / 2 //一半的屏幕宽度
                const spanRight = totalWidths - spanLeft //元素的右边距离
                const scrollBox = document.getElementsByClassName('flash-list') //获取最外层的元素
                const scrollL = scrollBox[0].scrollLeft //滚动条滚动的距离
                if (spanLeft > widths || spanRight > widths) { //当元素左边距离大于屏幕一半宽度  或者  右边距离大于屏幕一半距离的时候
                    scrollBox[0].scrollLeft = scrollL + (spanLeft - widths) + divBox //滚动条最终的滚动距离
                }
            })
        }
        const leaderwallMonth = async (month: any, event: any): Promise<void> => {
            data.slide = true; //封锁滚动事件触发从而修改cur_tab
            data.cur_tab = month;
            const spanLeft = event.clientX //当前点击的元素左边距离
            const divBox = document.getElementsByClassName('active2')[0].clientWidth / 2 //点击的元素一半宽度
            const totalWidths = document.body.clientWidth //屏幕总宽度
            const widths = document.body.clientWidth / 2 //一半的屏幕宽度
            const spanRight = totalWidths - spanLeft //元素的右边距离
            const scrollBox = document.getElementsByClassName('flash-list') //获取最外层的元素
            const scrollL = scrollBox[0].scrollLeft //滚动条滚动的距离
            if (spanLeft > widths || spanRight > widths) { //当元素左边距离大于屏幕一半宽度  或者  右边距离大于屏幕一半距离的时候
            scrollBox[0].scrollLeft = scrollL + (spanLeft - widths) + divBox //滚动条最终的滚动距离
            }
            var anchor: any = await document.querySelector("#month" + month);

            await smoothscroll.polyfill(); //兼容ios
            await anchor.scrollIntoView({
                block: "start", //ios不支持block属性
                behavior: "smooth",
            });

            setTimeout(() => { //回正
            window.scrollTo({
                top: currentInstance.proxy.$refs.ref_top.getBoundingClientRect().top + window.scrollY -
                150, //getBoundingClientRect 相对于当前视口的位置
                behavior: "smooth" // 平滑滚动
            });
                data.slide = false; //结束封锁
            }, 1500)
        }
        const gifv_meigui = (): void => {
            if (data.number_list < 1) {
                Toast('数量不能为空')
                return 
            }
            Dialog.confirm({
                message: `确认消耗${consume()}钻石购买玫瑰花`,
                confirmButtonColor: '#2f73db',
                cancelButtonColor: '#909090'
            })
            .then(() => {
                // on confirm
                buygift()
            })
            .catch(() => {
                // on cancel
            });

        }
        const buygift = async ():Promise<void> => {
            const arys = {
                num: data.number_list
            } //参数
            const dataRes = await activityBuygift(arys)
            if (dataRes.data.status == 0) {
                SignIn_new();
                data.model_prize = false;
                data.number_list = '';
            }
            Toast(dataRes.data.text)
        }
        const singin_ = async ():Promise<void> => {
            let arys = {}; //参数
            const dataRes = await activityLeaderSign(arys)
            if (dataRes.data.status == 0) {
                SignIn_new()
                Toast(dataRes.data.text)
            }
        }
        const calist_tab = (tab_cur_: number):void => {
            if (tab_cur_ == 1) {
            data.number_list = 300;
            } else if (tab_cur_ == 2) {
            data.number_list = 1000
            } else {
            data.number_list = 3000
            }
            nextTick(() => {
                data.tab_cur_ = tab_cur_
            })
        }
        const Refresh_ = ():void => {
            data.Refresh_class = true;
            SignIn_new()
            setTimeout(() => {
                Toast('刷新成功')
            }, 2000)
        }
        const splice_ = (value: string):string => {
            let slice2 = "";
            if (value.length > 6) {
                slice2 = value
                slice2 = slice2.slice(0, 5)
                return slice2 + '...';
            } else {
                return value
            }
        }
        const num_con = (value: any):string => {
            let slice2 = null;
            if (value > 1000) {
                slice2 = value
                slice2 = slice2 / 1000
                slice2 = Math.round(slice2 * 10) / 10
                return slice2 + 'k';
            } else {
                return value
            }
        }
        const open_usrt = (user: any):void => {
            if ((window as any).isWeixin) {
                wx.miniProgram.navigateTo({
                    url: "/pages/me/me?memberId=" + user,
                });
            } else {
                if ((window as any).isiOS) {
                    console.log("isiOS环境");
                    (window as any).webkit.messageHandlers.openProfile.postMessage({
                        userId: user,
                    });
                } else {
                    console.log("安卓环境");
                    (window as any).app.openProfile(user);
                }
            }
        }
        SignIn_new()
        return {
            consume,
            splice_,
            Refresh_,
            calist_tab,
            SignIn_new,
            tab_list,
            scrollEvent,
            gifv_meigui,
            leaderwallMonth,
            singin_,
            num_con,
            open_usrt,
            ...toRefs(data)
        }
    }
})
</script>

<style lang="less" scoped>
@import './SignInNew.less';
</style>